<template>
  <!-- 催收执行页-通讯录模块-电话簿 -->
  <section class="component telephone-book">
    <!-- 按钮区域 -->
    <el-row type="flex" justify="space-between" v-if="!hiddenAction && menuChannel !== 44 && menuChannel !== 34 && menuChannel !== 4 && menuChannel !== 18 && menuChannel !== 58">
      <div id="content" style="display:none"></div>

      <el-col :span="18" style="padding-left: 10px">
        <el-button type="primary" @click="stopCase('sms')" plain>停催短信</el-button>
        <el-button type="primary" @click="stopCase('tel')" plain>停催电话</el-button>
        <el-button type="primary" @click="cancelCase('sms')" plain>取消短信停催</el-button>
        <el-button type="primary" @click="cancelCase('tel')" plain>取消电话停催</el-button>
        <el-button type="primary" @click="onClickPhone" plain>新增电话</el-button>
      </el-col>
      <el-col :span="6" style="min-width: 360px">
        <div style="float: right; padding-left: 10px; padding-right: 10px">
          <el-button @click="makeCall">拨号</el-button>
        </div>
        <el-input clearable placeholder="请输入电话号码" style="width: 120px; float: right" maxlength="11" v-model="inputPhone"></el-input>
      </el-col>
    </el-row>
    <data-box :data="dataSet" :selectionRow="selectionRow" @update:selectionList="onSelectedRowChange">
      <template slot="columns">
        <el-table-column>
          <template slot-scope="scope">
            <input type="radio" :value="scope.row.id" name="scope.row.id" @click="radioClick(scope.row)">
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(7)" label="操作" v-if="!hiddenAction">
          <template slot-scope="scope">
            <el-tooltip :content="
                '停催到期时间: ' +
                  $filter.dateTimeFormat(scope.row.pausePhoneDueDate)
              " :disabled="scope.row.pausePhone !== 'YES'" effect="dark">
              <div class="tip">
                <el-button :disabled="scope.row.pausePhone === 'YES'" @click="onCall(scope.row)" type="text" v-if="!hiddenAction && menuChannel !== 44 && menuChannel !== 34 && menuChannel !== 18 && menuChannel !== 4 && menuChannel !== 58">拨号</el-button>
              </div>
            </el-tooltip>
            <el-tooltip :content="
                '停催到期时间: ' +
                  $filter.dateTimeFormat(scope.row.pauseSmsDueDate)
              " :disabled="scope.row.pauseSms !== 'YES'" effect="dark">
              <div class="tip">
                <el-button :disabled="scope.row.pauseSms === 'YES'" @click="sendMessage(scope.row)" type="text" v-if="!hiddenAction && menuChannel !== 44 && menuChannel !== 34 && menuChannel !== 18 && menuChannel !== 4 && menuChannel !== 58">短信</el-button>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="dataSource" label="来源" :min-width="$helper.getColumnWidth(3)" :formatter="row => $filter.dictConvert(row.dataSource, 'DataSource')"></el-table-column>
        <el-table-column prop="relation" label="关系" :min-width="$helper.getColumnWidth(2)" :formatter="row => $filter.dictConvert(row.relation, 'Relationship')"></el-table-column>
        <el-table-column prop="contName" label="姓名" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="phoneType" label="电话类型" :min-width="$helper.getColumnWidth(3)" :formatter="row => $filter.dictConvert(row.phoneType, 'PhoneType')">
        </el-table-column>
        <el-table-column prop="phoneRank" label="电话等级" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="phone" label="电话号码" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <div v-if="!hiddenAction && menuChannel !== 44 && menuChannel !== 34 && menuChannel !== getMenuConfig().Legal_settle && menuChannel !== getMenuConfig().Tel_settle && menuChannel !== 58">
              <el-button type="text" @click="onCall(scope.row)" :disabled="scope.row.pausePhone === 'YES'">{{ scope.row.phone }}</el-button>
              <i class="el-icon-edit-outline icon-phone-style" @click="onClickEdit(scope.row)"></i>
            </div>
            <div v-else>{{ scope.row.phone }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="latelyObjectiveCode.name" label="最近客观码" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column label="最近联系日期" prop="latelyContactDate" :formatter="row => $filter.dateTimeFormat(row.latelyContactDate)" :min-width="$helper.getColumnWidth(4)"></el-table-column>
      </template>
    </data-box>
    <!-- 弹出窗口 -->
    <!-- 增加催收总结 -->
    <el-dialog :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialog.addCaseTelRecord" title="添加催记" width="600px">
      <add-case-tel-record :phoneData="phoneData" :showInput="showInput" @close="
          (dialog.addCaseTelRecord = false), (inputPhone = ''), refreshData()
        " ref="add-case-tel-record" @success="success"></add-case-tel-record>
    </el-dialog>

    <!-- 电话流水 -->
    <el-dialog :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialog.telWater" @open="$nextTick(() => $refs['tel-water'].refreshData())" title="电话流水" width="1030px">
      <tel-water :caseId="caseId" :phoneData="phoneData" @close="dialog.telWater = false" ref="tel-water"></tel-water>
    </el-dialog>
    <el-dialog :title="
        otherModel.caseHaltCategory === 'MESSAGE_HALT'
          ? '停催短信'
          : otherModel.caseHaltCategory === 'TEL_HALT'
          ? '停催电话'
          : `${applyType.name}申请`
      " width="600px" :visible.sync="dialog.apply" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body>
      <apply :radioId="radioRow.id" :caseIds="[caseId]" :otherData="otherModel" :applyType="applyType.value" :flag="true" @close="
          dialog.apply = false;
          refreshData();
        " ref="apply-circulation"></apply>
    </el-dialog>

    <el-dialog title="新增联系人" width="700px" :visible.sync="dialog.contact" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body>
      <add-contact :caseId="caseId" @close="
          dialog.contact = false;
          refreshData();
        "></add-contact>
    </el-dialog>

    <!-- 短信 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialog.sendMessage" append-to-body title="发送短信" width="700px">
      <send-message :contactsData="contactsData" @close="dialog.sendMessage = false" ref="send-message"></send-message>
    </el-dialog>

    <!-- 邮件 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialog.sendMail" @open="$nextTick(() => $refs['send-mail'].refresh())" append-to-body title="发送邮件" width="700px">
      <send-mail :caseId="caseId" :contactsData="contactsData" @close="dialog.sendMail = false" ref="send-mail"></send-mail>
    </el-dialog>

    <el-dialog title="添加外访催记" width="650px" :visible.sync="dialog.addVisitCaseFollowupRecord" :close-on-press-escape="false" :close-on-click-modal="false" :append-to-body="true" @open="$nextTick(() => $refs['visit-action-area'].showAddressDetail())">
      <visit-action-area :showInput="showInput" :phoneData="phoneData" :caseId="caseId" @success="onFollowSuccess" @close="dialog.addVisitCaseFollowupRecord = false" ref="visit-action-area"></visit-action-area>
    </el-dialog>

    <el-dialog title="新增电话" width="700px" :visible.sync="dialog.addPhone" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body>
      <add-telephone :caseId="caseId" @close="
          dialog.addPhone = false;
          refreshData();
        " ref="add-phone"></add-telephone>
    </el-dialog>

    <el-dialog title="拨号" width="500px" :visible.sync="dialog.callPhone" show-close :close-on-click-modal="false" :close-on-press-escape="false" append-to-body>
      <call-bar @close="
          dialog.callPhone = false;
          refreshData();
        "></call-bar>
    </el-dialog>
    <!-- 取消停催电话短信 -->
    <el-dialog :title="cancelType === 'sms' ? '申请取消短信停催' : '申请取消电话停催'" width="600px" :visible.sync="dialog.cancelSms" show-close :close-on-click-modal="false" :close-on-press-escape="false" append-to-body @closed="refreshData()">
      <el-form :model="cancelReason" ref="cancelReasonRef" :rules="cancelReasonRule" class="cancelReason">
        <el-form-item label="停催激活原因" prop="text">
          <el-input v-model="cancelReason.text" type="textarea" style="width: 78%" rows="5" maxlength="200"></el-input>
        </el-form-item>
        <div class="operate-buttons">
          <el-button size="mini" @click="cancelDialog">取消</el-button>
          <el-button size="mini" @click="cancelCommit">提交</el-button>
        </div>
      </el-form>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { State, namespace } from "vuex-class";
import { Dependencies } from "~/core/decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import AddCaseTelRecord from "~/components/collection-execution/operate-components/add-case-tel-record.vue";
import SendMessage from "~/components/collection-execution/operate-components/send-message.vue";
import SendMail from "~/components/collection-execution/operate-components/send-mail.vue";
import { Prop, Watch } from "vue-property-decorator";
import TelWater from "~/components/collection-execution/operate-components/tel-water.vue";
import {
  ApplyType,
  CASE_CHANNEL,
  CASE_HALT_CATEGORY,
  MENU_CHANNEL
} from "~/config/enum.config";
import PauseApply from "~/components/apply-component/pause-apply.vue";
import AddContact from "~/components/collection-execution/operate-components/add-contact.vue";
import { RepairCasesService } from "~/services/domain-service/repair-cases.service";
import VisitActionArea from "~/components/collection-execution/collection-action-area/visit-action-area.vue";
import Apply from "~/components/visit-case/apply.vue";
import AddTelephone from "./add-telephone.vue";
const CollectionExecutionModule = namespace("collection-execution");
import { CaseApplyRecordService } from "~/services/domain-service/case-apply-record.service";
const callCenterStore = namespace("call-center");
import CallBar from "~/components/call-center/call-bar.vue";
import { addDragListener, mountWebAgent } from "~/components/call-center/util";
import { callState } from '~/utils/call-center/state';

@Component({
  components: {
    AddCaseTelRecord,
    TelWater,
    AddContact,
    SendMessage,
    SendMail,
    PauseApply,
    VisitActionArea,
    Apply,
    AddTelephone,
    CallBar
  }
})
export default class TelephoneBook extends Vue {
  @CollectionExecutionModule.Getter private collectonData;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(CaseApplyRecordService)
  private CaseApplyRecordService: CaseApplyRecordService;
  @Dependencies(RepairCasesService)
  private repairCasesService: RepairCasesService;
  @CollectionExecutionModule.State private caseId: string;
  @CollectionExecutionModule.State private hiddenAction;
  @CollectionExecutionModule.State private menuChannel;
  @CollectionExecutionModule.State private caseNo;
  @CollectionExecutionModule.State private isRefreshFollupComponent;
  @CollectionExecutionModule.Mutation private updateHistoryInfoActive;
  @CollectionExecutionModule.Mutation private updateAddRecordFlag;
  @CollectionExecutionModule.Mutation private updatePhoneClickData;
  @CollectionExecutionModule.Mutation private setIsRefreshFollupComponent;

  @callCenterStore.State private loginStatus!: boolean;
  @callCenterStore.State private callNumber!: string;
  @callCenterStore.State private eventData!: any;
  @callCenterStore.Mutation private updateCallNumber;
  @callCenterStore.Mutation private updateCallId;
  @callCenterStore.Mutation private updateIsHangUp;
  @callCenterStore.Mutation private updateLogin: (status: boolean) => void;
  @callCenterStore.Mutation private setMultiChannelLogout: (data: any) => void;
  @callCenterStore.State private multiChannelLogout: () => void;


  private callFile = "";

  private personalId: string = "";
  private dataSet: any[] = [];
  private cancelReasonRule: any = {
    text: [{ required: true, message: "请输入原因" }]
  }
  private cancelReason: any = {
    text: ''
  }
  private cancelType: string = ''
  private dialog: any = {
    cancelSms: false,
    addCaseTelRecord: false,
    telWater: false,
    apply: false,
    contact: false,
    sendMessage: false,
    sendMail: false,
    addVisitCaseFollowupRecord: false,
    addPhone: false,
    callPhone: false
  };
  private applyTypeChild: any = {};
  private phoneData: any = {
    phone: ""
  };
  private radioRow: any = {}
  private inputPhone: string = "";
  private contactsData: any = {};
  private caseHaltCategory: string = "";
  private hisTrackQuery: string = "";
  private applyType: any = {}
  private selectionRow: any = {};
  private showInput: any = false;

  private canAddRecord = false

  private otherModel = {
    caseHaltCategory: "",
    personalContractId: ""
  };
  private dialogVisible: boolean = false;
  private currentRow: any = {}

  @Watch("caseId") private change (val) {
    this.refreshData();
  }
  private get isTelShow () {
    const arr = [MENU_CHANNEL.Tel_personal, MENU_CHANNEL.Tel_team];
    return arr.find(v => this.menuChannel === v);
  }

  private getMenuConfig () {
    return MENU_CHANNEL
  }

  private get isVisitShow () {
    const arr = [
      MENU_CHANNEL.Visit_personal,
      MENU_CHANNEL.Visit_team,
      MENU_CHANNEL.Assist_visit
    ];
    return arr.find(v => this.menuChannel === v);
  }

  private radioClick (row) {
    this.radioRow = row
  }

  private onClickAddContact () {
    this.dialogVisible = true;
  }

  private onSelectedRowChange (row) {
    this.radioRow = row;
  }

  private onFollowSuccess () {
    this.updateHistoryInfoActive("");
    this.updateAddRecordFlag(true);
    this.$nextTick(() => {
      this.updateHistoryInfoActive("visit-action-history");
    });
  }
  private success () {
    this.updateHistoryInfoActive("");
    this.updateAddRecordFlag(true);
    this.$nextTick(() => {
      this.updateHistoryInfoActive("telephone-action-history");
    });
  }

  private onClickPhone () {
    this.dialog.addPhone = true;
    this.$nextTick(() => {
      const form: any = this.$refs["add-phone"] as Element;
      form.$refs["model"].resetFields();
    });
  }

  private refreshData () {
    console.log('personalContacts')

    // 获取联系人信息
    this.caseOperatorPageService
      .personalContacts(this.caseId)
      .subscribe(data => {
        // 排序（来源关系）：（导入本人）> (导入其他) > （新增本人） > (新增其他)
        const importData: any = data.filter(v => v.dataSource === "IMPORT");
        const addData: any = data.filter(v => v.dataSource === "ADD");
        const handleImportData: any = data.filter(v => v.dataSource === "HANDLE_IMPORT");

        const importSelfData: any = importData.filter(v => v.relation === "SELF");
        const importOtherData: any = importData.filter(v => v.relation !== "SELF");
        const addSelfData: any = addData.filter(v => v.relation === "SELF");
        const addOtherData: any = addData.filter(v => v.relation !== "SELF");
        const handleImportSelfData: any = handleImportData.filter(v => v.relation === "SELF");
        const handleImportOtherData: any = handleImportData.filter(v => v.relation !== "SELF");

        this.dataSet = [
          ...importSelfData,
          ...importOtherData,
          ...addSelfData,
          ...addOtherData,
          ...handleImportSelfData,
          ...handleImportOtherData
        ];
      });
  }

  private onClickEdit (row) {
    this.updatePhoneClickData(row);
  }

  /**
   * 增加催收总结
   */
  private addCaseTelRecord (rowData?) {
    this.phoneData = {};
    if (rowData) {
      this.showInput = true;
      this.phoneData = rowData;
    } else {
      if (!this.inputPhone && !rowData.phone) {
        this.$message("请输入电话号码");
        return;
      }
      this.phoneData.phone = this.inputPhone;
      this.showInput = false;
    }
    this.dialog.addCaseTelRecord = true;
  }

  private makeCall () {
    if (!this.inputPhone) {
      this.$message("请输入电话号码后重试");
      return;
    }
    this.callOut({ phone: this.inputPhone });
  }

  /**
   * 拨号
   */
  private onCall (rowData) {
    if (!rowData.phone) {
      this.$message("无效的号码");
      return;
    }
    this.callOut(rowData);
  }

  private async callOut (row: any) {
    const extData = this.eventData.ext || {};
    const WebAgent = (window as any).WebAgent
    console.log('extData.outBoundNumList', WebAgent);
    // if (!WebAgent.extend) {
    if (!callState.isLogined) {
      this.$message.info('请先登录座席')
      return
    }
    console.log('extData.outBoundNumList', extData.outBoundNumList);
    const phoneList = extData.outBoundNumList.split('|')
    const isIntellectCall = (document.querySelector('#intelSelect') as HTMLInputElement).checked
    console.log('phoneList', phoneList[phoneList.length - 1]);
    try {
      await WebAgent.extend.makeCall({
        outCallNumber: row.phone, disNumber: phoneList[phoneList.length - 1], isIntellectCall, 
      })
    } catch (error) {
      this.$message.warning('外呼请切换至置忙状态')
    }

    this.currentRow = row
    // this.canAddRecord = true
    // this.addFollowupRecord(this.currentRow);
  }


  @Watch('eventData')
  private eventDataChange (data) {
    const ext = data.ext || {}
    //外呼振铃事件后调用生成催记的接口
    if ((data.type === 'EVENT_OUTBOUND_ALERTING_OP')) {
      if (!this.inputPhone) {
        //获取电话面板呼出的电话号码
        this.currentRow.phone = (window as any).WebAgent.vm.callNumber();
      }
      this.addFollowupRecord(this.currentRow);
      this.canAddRecord = false
    }
    // 接通后将呼叫状态设为ture,挂断后设为false
    if (data.type === "EVENT_OUTBOUND_CONNECTED_TP") {
      callState.setCalling(true);
    } else if (data.type === "EVENT_TP_DISCONNECT") {
      callState.setCalling(false);
    }
  }

  /**
   * 生成新的催记记录接口
   */
  private addFollowupRecord (row?: any) {
    // console.log('sessionId', this.eventData.ext.sessionId);
    // console.log('currentRow', this.currentRow);
    let params: any = { caseId: this.caseId, recordId: this.eventData.ext.sessionId, agentExt: this.eventData.ext.strDestAni  }
    if (row) {
      params = { ...params, id: row.id, relationship: row.relation, targetName: row.contName, targetPhone: row.phone, isEditable: "1" };
    }

    this.caseOperatorPageService
      .increaseCaseFollowupRecord(params)
      .subscribe(data => {
        this.setIsRefreshFollupComponent(!this.isRefreshFollupComponent)
      });
  }


  /**
   * 发送短信
   */
  private sendMessage (row) {
    this.contactsData = row;
    this.dialog.sendMessage = true;
    this.$nextTick(() => {
      const form: any = this.$refs["send-message"];
      form.getMessageList();
      form.model.templateId = "";
      form.model.templateContent = "";
    });
  }

  /**
   * 发送邮件
   */
  private sendMail (row) {
    this.contactsData = row;
    this.dialog.sendMail = true;
  }

  // // 取消短信停催
  // private cancelSMSClick() {
  //   if (!this.checkSelectedRow) return
  //   const refs: any = this.$refs['cancelReasonRef']
  //   refs.validate(valid => {
  //     if (!valid) return false;
  //     this.cancelhandler(CASE_HALT_CATEGORY.MESSAGE_ACTIVE);
  //   });
  // }

  // // 取消电话停催
  // private cancelTelClick() {
  //   if (!this.checkSelectedRow) return
  //    const refs: any = this.$refs['cancelReasonRef']
  //     refs.validate(valid => {
  //       if (!valid) return false;
  //       this.cancelhandler(CASE_HALT_CATEGORY.TEL_ACTIVE);
  //     });
  // }

  private cancelhandler () { // 取消停催调接口
    const param = {
      caseActiveCategory: this.cancelType === 'sms' ? CASE_HALT_CATEGORY.MESSAGE_ACTIVE : CASE_HALT_CATEGORY.TEL_ACTIVE,
      caseIds: [this.caseId],
      personalContractId: this.radioRow.id,
      caseNumber: this.caseNo,
      applyDescription: this.cancelReason.text
    };
    this.CaseApplyRecordService.applyPauseCaseActive(param).subscribe(data => {
      if (data && data.messageModels && data.messageModels[0]) {
        this.$message.warning(data.messageModels[0].message)
      } else {
        this.$message.success('操作成功')
      }
      this.cancelDialog()
      this.refreshData();
    });
  }

  private cancelDialog () { // 停催弹框取消
    const refs: any = this.$refs['cancelReasonRef']
    refs.resetFields()
    this.dialog.cancelSms = false;
    this.cancelReason.text = ''
  }

  private cancelCommit () { // 停催弹框提交
    const refs: any = this.$refs['cancelReasonRef']
    refs.validate(valid => {
      if (!valid) return false;
      this.cancelhandler();
    });
  }

  private cancelCase (type) { // 取消停催
    if (!this.checkSelectedRow) return
    if (type === 'sms' && this.radioRow.pauseSms === "NO") {
      this.$message('短信停催已取消，无需重复申请');
      return;
    } else if (type === 'tel' && this.radioRow.pausePhone === "NO") {
      this.$message('电话停催已取消，无需重复申请');
      return;
    }
    this.cancelType = type
    this.dialog.cancelSms = true
  }

  private stopCase (type) { // 短信停催 电话停催
    if (!this.checkSelectedRow) return
    if (type === 'sms' && this.radioRow.pauseSms === "YES") {
      this.$message('短信已停催，无需重复申请');
      return;
    } else if (type === 'tel' && this.radioRow.pausePhone === "YES") {
      this.$message('电话已停催，无需重复申请');
      return;
    }
    this.applyType = type === 'sms' ? ApplyType.sms : ApplyType.tel
    this.otherModel.caseHaltCategory = type === 'sms' ? CASE_HALT_CATEGORY.MESSAGE_HALT : CASE_HALT_CATEGORY.TEL_HALT
    this.dialog.apply = true;
  }

  // private stopTelClick() { // 电话停催
  //   if (!this.checkSelectedRow) return
  //   if (this.radioRow.pausePhone === "YES") {
  //     this.$message("电话已停催，无需重复申请");
  //     return;
  //   }
  //   this.applyType = ApplyType.tel
  //   this.otherModel.caseHaltCategory = CASE_HALT_CATEGORY.TEL_HALT;
  //   this.dialog.apply = true;
  // }

  /**
   * 检测是否选中
   */
  private get checkSelectedRow (): boolean {
    if (Object.keys(this.radioRow).length === 0) {
      this.$message("请选择要操作的数据行");
      return false;
    }
    this.otherModel.personalContractId = this.radioRow.id;
    return true;
  }

  private deleteClick (row: any) {
    this.caseOperatorPageService
      .deletePersonalContact(row.id)
      .subscribe(data => {
        this.$message.success("操作成功");
        this.refreshData();
      });
  }

  private assistClick () {
    this.applyType = ApplyType.assist;
    this.dialog.apply = true;
    this.applyType.name = "外访协催";
  }

  private addVisitCaseFollowupRecord (rowData?) {
    if (rowData) {
      this.phoneData = rowData;
      this.dialog.addVisitCaseFollowupRecord = true;
    }
  }

  private activated () {
    this.refreshData();
  }


  private initIntelSelect () {
    const ele = document.querySelector('#intelSelect') as HTMLInputElement
    if (ele) {
      ele.checked = true
    }
  }

  private initWebAgent () {
    if (callState.isLogined) return

    const params = sessionStorage.getItem('webAgentLoginParmas')
    if (params) {
      console.log('初始化参数', JSON.parse(params));

      mountWebAgent(JSON.parse(params), (data) => {
        if (data.status === 'loginSuccess') {
          callState.updateLoginState(true)
          this.setMultiChannelLogout(data.WebAgent.multiChannelLogout)
          this.initIntelSelect()
        }
      })
    }
  }

  private mounted () {
    this.refreshData();

    this.initWebAgent()
    this.initIntelSelect()

    setTimeout(() => {
      addDragListener(document.querySelector('.cchat-header'))
    }, 2000);

  }

  private destroyed () {
    (window as any).WebAgent.WaChat?.hide();

    // if(callState.isLogined){
    //   this.multiChannelLogout?.()      
    // }

  }


}
</script>

<style lang="less" scoped>
.tip {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 4px;
}
.component.telephone-book {
  .name {
    font-size: 18px;
    font-weight: bold;
  }
  .margin-right-30 {
    margin-right: 30px;
  }
  .data-set {
    padding: 0;
    margin-top: 10px;
    padding-right: 30px;
  }
  .phone-number-style {
    cursor: pointer;
    color: #409eff;
  }
  .icon-phone-style {
    cursor: pointer;
    margin-left: 5px;
    color: #409eff;
  }
}
</style>
<style lang="less">
.cancelReason {
  .operate-buttons {
    button {
      width: 100px;
    }
  }
  .el-form-item__label {
    margin-top: -8px;
  }
  .el-form-item__error {
    left: 104px;
  }
}
</style>
